.json-home.dark {
  .canvas-area {
    background-color: #191A1F;
    box-shadow: 1px 0 3px inset #000;
  }
  &:deep(.jsoneditor-vue) {
    .jsoneditor.jsoneditor-mode-code {
      background-color: #232429 !important;
    }
    .ace-jsoneditor  {
      .ace_variable{
        color: #68baf9 !important;
      }
      .ace_string {
        color: #ce9178 !important;
      }
      .ace_marker-layer{
        .ace_selection, .ace_active-line {
          background: #3b3b3b !important;
        }
      }
    }
  
    div.jsoneditor {
      border: 1px solid rgb(85, 85, 85);
      border-radius: 4px;
      .jsoneditor-outer {
        .ace_gutter {
          background-color: #232429!important;
          color: #ccc !important;
          height: 100% !important;
        }
        & .ace_folding-enabled .ace_gutter-cell {
          background-color: #232429 !important;
        }
        .ace_content {
          background-color: #1B1C21 !important;
          ::selection{
             color: #000 !important;
          }
        }
        
      }
    }
  }
}
